<template>
  <div class="offline-order-form">
    <head-title title="运营--总部信息"></head-title>
    <el-card>
      <quill-editor class="ql-editor" ref="myQuillEditor" v-model="brief" :options="editorOption"></quill-editor>
      <el-button type="primary" @click="submitForm" style="margin: 15px;">保存</el-button>
    </el-card>
  </div>
</template>
<script>
import md5 from 'md5'
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
import { quillEditor, Quill } from 'vue-quill-editor';
import { container , addQuillTitle} from 'quill-video-image-module';
import { ImageExtend, QuillWatch } from 'quill-video-image-module';
import { VideoExtend, QuillVideoWatch } from 'quill-video-image-module';

// 引入video模块并注册
import video from 'quill-video-image-module/video';
Quill.register(video, true);

Quill.register('modules/ImageExtend', ImageExtend);
Quill.register('modules/VideoExtend', VideoExtend);

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
export default {
  components: { quillEditor,Quill,ImageExtend,VideoExtend,addQuillTitle },
  data(){
    return {
      brief: '',
      brief: '',
      editorOption: {
				modules: {
					imageResize: {},
					ImageExtend: {
						loading: true, // 可选参数 是否显示上传进度和提示语
						name: 'file[]', // 图片参数名
						size: 1, // 可选参数 图片大小，单位为M，1M = 1024kb
						action: `${this.$domain}api/Upimg/UpImg`, // 服务器地址, 如果action为空，则采用base64插入图片
						// response 为一个函数用来获取服务器返回的具体图片地址
						// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
						// 则 return res.data.url
						response: res => {
							return res.datas[0];
						},
						headers: () => {}, // 可选参数 设置请求头部
						start: () => {}, // 可选参数 自定义开始上传触发事件
						end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
						error: () => {}, // 可选参数 自定义网络错误触发的事件
						change: (xhr, formData) => {
							formData.append('timestamp', Math.round(new Date() * 1000));
							formData.append('port', 'pc');
							formData.append('sign', this.getSign());
							formData.append('key', localStorage.getItem('token'));
						}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
						sizeError: () => {
							this.$message({
								message: '图片不能大于1M',
								type: 'warning'
							});
						}
					},
					VideoExtend: {
						loading: true,
						name: 'file[]',
						size: 100, // 可选参数 视频大小，单位为M，1M = 1024kb
						action: `${this.$domain}api/Upimg/UpVideo`, // 视频上传接口
						headers: xhr => {
							// set custom token(optional)
						},
						response: res => {
							// video uploaded path
							// custom your own
							return res.datas;
						},
						change: (xhr, formData) => {
							formData.append('timestamp', Math.round(new Date() * 1000));
							formData.append('port', 'pc');
							formData.append('sign', this.getSign());
							formData.append('key', localStorage.getItem('token'));
						}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
						sizeError: () => {
							this.$message({
								message: '视频不能大于100M',
								type: 'warning'
							});
						}
					},
					toolbar: {
						container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
						handlers: {
							image: function() {
								// 劫持原来的图片点击按钮事件
								QuillWatch.emit(this.quill.id);
							},
							video: function() {
								QuillVideoWatch.emit(this.quill.id);
							}
						}
					}
				}
			}
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      this.$http(this.$ApiList.ConfigInfo).then(res => {
        if(res.code==200){
          this.brief = res.datas.brief
          this.config_id = res.datas.config_id
        }
			});
    },
    submitForm() {
			this.$http(this.$ApiList.UpdateBrand,{config_id: this.config_id,brief: this.brief}).then(res => {
        this.$layer.msg('保存成功');
      });
		},
    getSign(){
			let data = {
				key:localStorage.getItem('token'),
				timestamp:Math.round(new Date() * 1000),
				port:'pc'
			}
      // 获取签名开始
      let obj = 'jjds2020+'
      let newObj = this.objKeySort(data)
      for (let i in newObj){
        obj += i + '=' + newObj[i] +'&'
      }
      obj = obj.substring(0, obj.length - 1)
      obj += '+jjds2020'
      obj = md5(obj)
      return obj
		},
		objKeySort(obj) {
			var newkey = Object.keys(obj).sort();
			var newObj = {};
			for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
			}
			return newObj;
		},
  }
}
</script>
<style lang="scss" scoped>
.change-goods-dialog{
	ul li{
		margin-top: 20px;
    &:first-child{
      margin-top: 0;
    }
		h1{
			font-size: 16px;
			color: #000;
		}
		.input{
			display: flex;
			align-items: flex-start;
			margin-top: 12px;
			label{
				width: 100px;
				line-height: 40px;
			}
			label + *{
				flex: 1;
				min-width: 0;
			}
			.el-switch{
				margin-top: 10px;
			}
		}
	}
}
</style>